<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>登录</title>
    <style>
        body{ text-align:center}
        .div{ margin:0 auto; width:400px; height:100px; border:1px solid #F00}
    </style>
</head>

<body style="background-color: #f1f1f1; padding-bottom: 0">
<form action="/server/authentication/form" method="post">
    <div class="div">
        <table>
            <tr>
                <td>用户名:</td>
                <td>
                    <input class="cookie" type="hidden" name="_csrf">
                    <input class="username" type="text" name="username">
                </td>
            </tr>
            <tr>
                <td>密码:</td>
                <td><input class="password" type="password" name="password"></td>
            </tr>
            <tr>
                <td colspan="2"><button type="submit">登录</button></td>
            </tr>
        </table>
    </div>
</form>
</body>
<script type="text/javascript">
    var username = document.getElementsByClassName('usesrname')[0]
    var password = document.getElementsByClassName('password')[0]
    var cookie = getCookie('CSRF-TOKEN')
    console.log(cookie)
    document.getElementsByClassName('cookie')[0].value = cookie

    // document.getElementsByClassName('submit')[0].onclick = function(){
    //     //创建异步对象
    //     var xhr = new XMLHttpRequest();
    //     //设置请求的类型及url
    //     //post请求一定要添加请求头才行不然会报错
    //     xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    //     xhr.setRequestHeader("Cookie",document.cookie);
    //     xhr.open('POST', '/server/authentication/form' );
    //     //发送请求
    //     var params = formatParams({
    //         username:username,
    //         passsword:password
    //     })
    //     xhr.send({
    //         username:username,
    //         passsword:password
    //     });
    //     xhr.onreadystatechange = function () {
    //         // 这步为判断服务器是否正确响应
    //         if (xhr.readyState == 4 && xhr.status == 200) {
    //             console.log(xhr.responseText);
    //         }
    //     };
    // }

    function getCookie(name)
    {
        var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");

        if(arr=document.cookie.match(reg))

            return unescape(arr[2]);
        else
            return null;
    }
    //格式化参数
    function formatParams(data) {
        var arr = [];
        for (var name in data) {
            arr.push(encodeURIComponent(name) + "=" + encodeURIComponent(data[name]));
        }
        arr.push(("v=" + Math.random()).replace(".",""));
        return arr.join("&");
    }
</script>
</html>